<template>
	<view id="app">
		<!-- 地图 -->
		<map id="map" class="map w100p h100p" :latitude="latitude" :longitude="longitude" :show-location="true" @markertap="markertap" :markers="markers" @regionchange="getShop">
		</map>
	</view>
</template>
<script>
	// 定义全局变量
	var that;
	// 默认
	export default {
		// 定义页面变量
		data() {
			return {
				// 当前位置
				// 纬度
				latitude: '',
				// 精度
				longitude: '',
				// 标记点
				markers: [],
				// 地点
				location: '',
			}
		},

		// 获取后
		onLoad() {
			// 赋值
			that = this;

			// 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。如果用户之前拒绝了授权，此接口会直接进入失败回调，一般搭配uni.getSetting和uni.openSetting使用
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					// 获取当前经纬度
					uni.getLocation({
						// #ifdef MP
						type: 'gcj02',
						// #endif
						success(res) {
							console.log(res);
							that.latitude = res.latitude;
							that.longitude = res.longitude;

							// 赋值坐标点
							that.location = that.longitude + ',' + that.latitude;

							// 获取商家
							that.getShop();
						}
					});
				},
				fail() {
					// 调起客户端小程序设置界面，返回用户设置的操作结果。
					uni.openSetting();
				}
			});
		},

		// 方法列表
		methods: {
			// 获取商家
			getShop(e) {
				// 判断有无地点
				if (e && e.detail && e.detail.centerLocation) {
					that.location = e.detail.centerLocation.longitude + ',' + e.detail.centerLocation.latitude;
				}

				// 导航加载
				uni.showNavigationBarLoading();

				// 请求接口 
				that.request({
					url: '/api/index/getShop',
					// 上传数据
					data: {
						location: that.location,
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 清空
							that.markers = [];

							// 遍历列表
							rs.data.forEach((e, i) => {
								// 赋值坐标点
								e.latitude = e.shop_location.split(',')[0];
								e.longitude = e.shop_location.split(',')[1];
								// 图标
								e.iconPath = e.shop_logo;
								// 图标宽度
								e.width = '30';
								// 图标高度
								e.height = '30';
								// 气泡信息
								e.callout = {
									// 内容
									content: e.shop_name,
									// 填充
									padding: 5,
									// 背景颜色
									bgColor: '#fff',
									// 文字大小
									fontSize: 12,
									// 文本颜色
									color: '#222',
									// 显示方式 常量
									display: 'ALWAYS',
								}

								// 追加数组
								that.markers.push(e);
							});
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					},
					complete() {
						// 关闭导航加载
						uni.hideNavigationBarLoading();
					},
				})
			},

			// 点击地图 标记
			markertap(e) {
				// 定义经纬度
				var location = '';

				// 遍历找经纬度
				that.markers.forEach((item, i) => {
					if (e.markerId == item.id) {
						// 赋值经纬度
						location = item.shop_location;
					}
				})

				// 跳转商家详情
				uni.navigateTo({
					url: '/pages/task/businessdetails?id=' + e.detail.markerId + '&location=' + location,
				})
			},
		},
	}
</script>
<style>
</style>
